<template>
	<view class="pages">
		<view class="tips u-font-28">
			<u-icon class="u-m-r-10" name="rmb-circle" color="#F59A23" size="32"></u-icon>
			累计提现： <text class="text-warning">{{totalAmount}} </text> 元
		</view>
		<view style="height: 88rpx;"></view>
		<template v-if="list && list.length">
			<view v-for="(item,index) in list" :key="index" class="u-m-b-50">
				<view class="header u-m-b-40">
					<view class="timer bold">{{item.month}}</view>
					<view class="total u-font-28">提现<text class="u-font-22">
							￥</text>{{item.list | handleTotal}}</view>
				</view>
				<view class="content">
					<view v-for="(items,indexs) in item.list" :key="items.id"
						:class="{'border-bottom': indexs != item.list.length -1}" class="flex align-center u-m-t-20 u-p-b-20">
						<view class="icon">
							<view>微信</view>
							<view>钱包</view>
						</view>
						<view class="money">￥{{items.amount}}</view>
						<view class="status" v-if="items.state > 0" @click="openModel(items)">{{items.state | handleStatus}}</view>
						<view class="time" v-else>{{items.createTime}}</view>
					</view>
				</view>
			</view>
			<view class="u-p-b-30">
				<u-loadmore :status="status" font-size="24" @loadmore="loadmore" />
			</view>
		</template>
		<view class="flex align-center justify-center empty" v-if="(!list || !list.length) && !isOne">
			<uni-nodata noText="提现明细为空"></uni-nodata>
		</view>
		<u-modal :mask-close-able="false" title="拒绝原因" v-model="show" confirm-color="#F59A23" :content="content"></u-modal>
	</view>
</template>

<script>
	import {
		withdrawDepositList
	} from "@/api/mine.js"
	export default {
		data() {
			return {
				totalAmount: 0,
				content: "",
				show: false,
				isOne: true, //是否第一次进入页面
				isLock: false,
				status: "loadmore",
				page: 1,
				pageSize: 10,
				list: []
			}
		},
		onLoad() {
			this.getList();
		},
		onReachBottom() {
			this.handleReachBottom();
		},
		filters: {
			handleStatus(val) {
				let data = {
					1: "拒绝原因",
					2: "驳回原因",
					3: "待审核"
				}
				return data[val] || '';
			},
			handleTotal(list) {
				let money = 0;
				if (list && list.length) {
					list.forEach(e => {
						if (e.state === '0') {
							money += e.amount;
						}
					})
				}
				return money;
			}
		},

		methods: {
			openModel(row) {
				console.log(row.state);
				if (['1', '2'].includes(row.state)) {
					this.content = row.auditMessage;
					this.show = true;
				}
			},
			handleReachBottom() {
				if (this.status === 'nomore' || this.isLock) return;
				this.page++;
				this.getList();
			},
			loadmore() {
				this.handleReachBottom();
			},
			getList() {
				this.isLock = true;
				uni.showLoading({
					mask: true
				});
				withdrawDepositList({
					page: this.page,
					pageSize: this.pageSize
				}).then(res => {
					this.isOne = false;
					this.isLock = false;
					this.totalAmount = res.data?.totalAmount;
					if (res.data && res.data.pageData && res.data.pageData.data.length) {
						res.data.pageData.data.forEach(e => {
							let year = new Date(e.createTime.replace(/-/g, '/')).getFullYear();
							let month = new Date(e.createTime.replace(/-/g, '/')).getMonth() + 1;
							let timer = year + '-' + month;
							let nowTimer = new Date().getFullYear() + '-' + (new Date().getMonth() + 1);
							let months = nowTimer == timer ? '本月' : timer;
							if (!this.list.length) {
								this.list.push({
									list: [{
										...e
									}],
									month: months
								});
							} else {
								let index = this.list.findIndex(v => v.month == months);
								if (index > -1) {
									this.list[index].list.push(e);
								} else {
									this.list.push({
										list: [e],
										month: months
									})
								}
							}
						})
					}
					if (!res.data || !res.data.pageData || !res.data.pageData.data || res.data.pageData.data.length < this
						.pageSize) {
						this.status = 'nomore';
					} else {
						this.status = 'loadmore';
					}
				}).finally(()=>{
					uni.hideLoading();
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.empty {
		width: 600rpx;
		height: 600rpx;
		margin: 0 auto;
	}

	.p-b-10 {
		padding-bottom: 10rpx;
	}

	.tips {
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		height: 88rpx;
		display: flex;
		align-items: center;
		padding: 0 30rpx;
		background-color: rgba(255, 255, 221, .8);
		color: #333333;
	}

	.pages {
		background-color: #F5F5F5;
		min-height: 100vh;
		padding: 30rpx;

		.header {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.timer {
				color: #333333;
				font-size: 36rpx;
			}

			.total {
				color: #7F7F7F;
				font-size: 28rpx;
			}
		}

		.content {
			background-color: #ffffff;
			border-radius: 20rpx;
			padding-left: 20rpx;
			padding-right: 20rpx;
			padding-top: 15rpx;
			padding-bottom: 15rpx;

			.status {
				color: #F59A23;
				font-size: 24rpx;
				border-radius: 100rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				height: 60rpx;
				padding-left: 30rpx;
				padding-right: 30rpx;
				margin-left: auto;
				background-color: rgba(242, 242, 242, 0.64);
			}

			.border-bottom {
				border-bottom: 2rpx solid #E5E6EA;
			}

			.icon {
				width: 68rpx;
				height: 68rpx;
				border-radius: 100rpx;
				background-color: #F4FDFC;
				font-size: 16rpx;
				color: #F7DD5E;
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;
				// view{
				// 	transform: scale(0.75);
				// }
			}

			.money {
				margin-left: 30rpx;
				font-weight: bold;
				color: #7F7F7F;
				font-size: 28rpx;
			}

			.time {
				margin-left: auto;
				font-size: 22rpx;
				color: #AAAAAA;
			}
		}
	}
</style>